<template>
  <div>
    <a-card>
      <div v-if="isSimple">
        <h3>最近添加的图书</h3>
        <a-divider />
      </div>
      <div v-if="!isSimple">
        <h2>商品列表</h2>
        <a-divider />
        <!-- 搜索区域 -->
        <space-between>
          <div class="search">
            <a-input-search
              v-model:value="keyword"
              placeholder="根据商品名搜索"
              enter-button
              @search="onSearch"
            />
            <a v-show="isCleared" @click="onClear">清除</a>
          </div>
          <a-button
            @click=";(addOneVisible = true), getClassify()"
            type="primary"
          >
            添加一条
          </a-button>
        </space-between>
      </div>
      <!-- 商品表格 -->
      <div class="mt-15">
        <a-table
          :dataSource="goodlist"
          :columns="columns"
          :pagination="false"
          :scroll="{ x: 'max-content' }"
          bordered
        >
          <template #publishDate="data">
            {{ formateTimestamp(data.record.publishDate) }}
          </template>
          <template v-if="!isSimple" #operation="data">
            <a @click="toDetail(data.record._id)">详情</a>&nbsp;
            <a v-only-admin @click="delGood(data.record._id)">删除</a>&nbsp;
            <a v-only-admin @click="updateGood(data.record)">编辑</a>
          </template>
          <template #count="data">
            <a @click="editCount('OUT', data.record._id)" v-if="!isSimple"
              >出库</a
            >
            {{ data.record.count }}
            <a @click="editCount('IN', data.record._id)" v-if="!isSimple"
              >入库</a
            >
          </template>
        </a-table>
        <!-- 表格分页组件 -->
        <div class="mt-10">
          <a-pagination
            v-if="!isSimple"
            v-model:current="curPage"
            :page-size="pageSize"
            :total="total"
            @change="setPage"
          ></a-pagination>
        </div>
      </div>
    </a-card>

    <!-- 新增商品弹框 -->
    <add-one v-model:visible="addOneVisible" :classifyList="classifyList" />
    <update-one
      v-model:visible="updateOneVisible"
      :good="curEditGood"
      @update="updateGoodView"
    />
  </div>
</template>

<script src="./index.jsx"></script>

<style lang="scss" scoped>
.search {
  display: flex;
  align-items: center;
  a {
    margin-left: 10px;
    width: 40px;
  }
}
</style>
